<template>
  <v-layout title="公众号成本计算">
    <el-row type="flex" justify="center">
      <el-col :xl="14" :lg="18" :md="20" :sm="24" :xs="24">
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="120px"
        >
          <template
            slot="uploadImg"
            slot-scope="scope"
          >
            <el-form-item :label="scope.info.cn">
              <el-upload
                ref="upload"
                :on-preview="handlePreview"
                :file-list="fileList"
                :auto-upload="false"
                class="upload-demo"
                action="123">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                  上传到服务器
                </el-button>
              </el-upload>
            </el-form-item>
          </template>

        </v-form>
        <el-card v-if="accountData">
          <div slot="header" class="bold">
            买号基础信息:
          </div>
          <v-form
            :form-title="accountTitle"
            :form-data="accountData"
            label-width="120px"
          />
          <el-row type="flex" justify="end">
            <el-button type="primary" size="mini" @click="toAccount">查看买号详情</el-button>
          </el-row>
        </el-card>

        <el-card class="mt15">
          <div slot="header" class="bold">
            买量记录:
          </div>
          <v-table
            :table-title="quantityTitle"
            :table-data="quantityData"
            :select="false"
            :deletable="false"
            :editable="false"
            :readable="true"
            @read="toQuantity"
          />
        </el-card>
        <el-card class="mt15">
          <div slot="header" class="bold">
            公众号分摊表:
          </div>
          <v-table
            :table-title="shareTitle"
            :table-data="shareData"
            :default-operate="false"
            :select="false"
            :deletable="false"
            :editable="false"
            :readable="true"
            @read="toQuantity"
          />
        </el-card>

        <el-row type="flex" justify="end" class="pdt15">
          <el-button type="primary" size="small" @click="toTencent">查看公众号信息</el-button>
        </el-row>
      </el-col>
    </el-row>

  </v-layout>
</template>

<script>
  export default {
    data() {
      return {
        mpid: '',
        showBasicInfo: true,
        previewUrl: '',
        fileList: [],

        formTitle: [
          {
            cn: '公众号名称',
            en: 'name',
            disabled: true
          },
          {
            cn: '公众号logo',
            en: 'logo',
            disabled: true,
            type: 'img'
          },
          {
            cn: '粉丝数',
            en: 'fans_total',
            disabled: true
          },
          {
            cn: '上月订单数',
            en: 'order_total',
            disabled: true
          },
          // {
          //   cn: '上月订单金额',
          //   en: 'money',
          //   disabled: true
          // },
          // {
          //   cn: '订单总金额',
          //   en: 'total_money',
          //   disabled: true
          // },
          {
            cn: '总成本',
            en: 'total_cost',
            disabled: true
          },
          {
            cn: '总不含税原值',
            en: 'total_balance',
            disabled: true
          },
          {
            cn: '当月成本',
            en: 'per_month_cost',
            disabled: true
          },
          {
            cn: '周期',
            en: 'cycle',
            disabled: true
          },
          {
            cn: '累计成本',
            en: 'accumulated_cost',
            disabled: true
          },
          {
            cn: '剩余成本',
            en: 'rest_cost',
            disabled: true
          },
          {
            cn: '是否买号',
            en: 'buy_account',
            type: 'select',
            disabled: true,
            list: [
              {
                label: '是',
                value: 1
              },
              {
                label: '否',
                value: 0
              }
            ]
          }
        ],
        formData: {},

        tableTitle: [
          {
            cn: '序号',
            en: 'id'
          },
          {
            cn: '订单编号',
            en: 'number'
          },
          {
            cn: '公众号',
            en: 'tencent'
          },
          {
            cn: '版位',
            en: 'position'
          },
          {
            cn: '发文日期',
            en: 'publish_date'
          },
          {
            cn: '是否预订',
            en: 'is_book'
          }
        ],
        tableData: [],

        accountTitle: [
          {
            cn: '买号成本',
            en: 'mpsmoney',
            disabled: true
          },
          {
            cn: '不含税原值',
            en: 'balance',
            disabled: true
          },
          {
            cn: '生效时间',
            en: 'start_time',
            disabled: true
          },
          {
            cn: '周期',
            en: 'cycle',
            disabled: true
          },
          {
            cn: '合同付款状态',
            en: 'payment_status',
            type: 'select',
            disabled: true,
            list: [
              {
                label: '未付款',
                value: '1'
              },
              {
                label: '部分付款',
                value: '2'
              },
              {
                label: '全部付款',
                value: '3'
              }
            ]
          }
        ],
        accountData: null,

        quantityTitle: [
          {
            cn: '合同编号',
            en: 'ct_number'
          },
          {
            cn: '此次买量金额',
            en: 'fansmoney'
          },
          {
            cn: '不含税原值',
            en: 'balance',
            disabled: true
          },
          {
            cn: '周期',
            en: 'cycle'
          },
          {
            cn: '买量时间',
            en: 'start_time'
          },
          // {
          //   cn: '负责人',
          //   en: 'signing_people'
          // }
        ],
        quantityData: [],
        shareTitle: [
          {
            cn: '月份',
            en: 'time'
          },
          {
            cn: '本月成本',
            en: 'money'
          },
        ],
        shareData: []
      }
    },
    watch: {
      'formData.buy_account'(val) {
        this.showBasicInfo = (val === 0)
      }
    },
    activated() {
      this.mpid = this.$route.query.id
      this.getSummaryDetail()
    },
    methods: {
      // 获取汇总详情
      getSummaryDetail() {
        const data = {id: this.mpid}
        this.$get('action/Gather/qryOp', data)
          .then(res => {
            this.formData = res.data.mps;
            this.accountData = res.data.Buympsmpinfo[0]||{}
            this.quantityData = res.data.Buyfansmpinfo||[]
            this.shareData = res.data.info || []
            this.formData.buy_account = this.accountData ? 1 : 0;
            this.formData.cycle = 60;

            let account_balance = this.accountData.balance||0;//买号不含税原值
            let quantity_balance = 0;//买量不含税原值
            let mpsmoney = this.accountData.mpsmoney || 0;//买号成本
            let total_quantity_money = 0;//买量成本
            let accumulated_cost = 0;//累计成本
            let rest_cost = 0;//剩余成本
            let index = 0;

            this.quantityData.forEach(item => {
              quantity_balance += +item.balance
              total_quantity_money += +(item.fansmoney || 0)
            })
            this.formData.total_balance = (account_balance + quantity_balance).toFixed(2)||0
            console.log(account_balance,account_balance + quantity_balance,quantity_balance);
            this.formData.total_cost = (mpsmoney + total_quantity_money).toFixed(2)||0

            this.shareData.forEach((item1, index1) => {
              const itemDate = new Date(this.$parseTime(new Date(item1.time), '{y}-{m}')).getTime()
              const now = new Date(this.$parseTime(new Date(), '{y}-{m}')).getTime()
              if (itemDate < now) {
                accumulated_cost = accumulated_cost + item1.money
              }else{
                rest_cost = rest_cost + item1.money
                if (itemDate === now) {
                  this.formData.per_month_cost = item1.money;
                }
              }

            })
            for (let i = 0; i < index; i++) {
              accumulated_cost = accumulated_cost + this.shareData[i].money
            }
            for (let i = index; i < this.shareData.length; i++) {
              rest_cost = rest_cost + this.shareData[i].money
            }
            this.formData.accumulated_cost = accumulated_cost.toFixed(2)||0
            this.formData.rest_cost = rest_cost.toFixed(2)||0


          })
      },

      submitUpload() {
        this.$refs.upload.submit()
      },
      handlePreview(file) {
        this.showModel = true
        this.previewUrl = file.url
      },
      read(val) {
        this.$router.push({
          name: 'adv_order.order_info'
        })
      },
      toAccount() {
        this.$router.push({
          name: 'cost_manage.buyed_account.contract',
          query: {
            id: this.accountData.id
          }

        })
      },
      toQuantity(val) {
        this.$router.push({
          name: 'cost_manage.buyed_quantity.contract',
          query: {
            id: val.row.id
          }

        })
      },
      toTencent() {
        this.$router.push({
          name: 'tencent_list.tencent_create',
          query: {
            id: this.formData.id
          }
        })
      }
    }
  }
</script>
